<template>
  <div>
    <el-form
      :model="formAccount"
      class="demo-form-inline"
      label-position="right"
      label-width="120px"
    >
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="Account">
            <el-input
              v-model="formAccount.loginName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="name">
            <el-input
              v-model="formAccount.userName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="role">
            <el-select
              v-model="formAccount.roleKey"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in roleOptions"
                :label="item.roleName"
                :value="item.roleKey"
                :key="item.roleKey"
              /> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <el-form-item class="btn-right">
            <el-button color="#3A62D7" type="primary" @click="hadleSearch()">
              查 询
            </el-button>
            <el-button @click="handleReset()"> 重 置 </el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <div>
      <div>
        <el-button
          color="#3A62D7"
          @click="addAccount()"
          style="height: 28px"
          type="primary"
          :disabled="!store.state.roleCodes.includes('Create-Account')"
          >Create</el-button
        >
      </div>
      <el-table
        max-height="334"
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#EFEFEF',
          color: '#101010',
          height: '54px',
          border: '1px solid #fff'
        }"
        :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
      >
        <el-table-column type="index" label="No." width="70" />
        <el-table-column prop="loginName" label="Account" width="180" />
        <el-table-column prop="userName" label="Name" width="180" />
        <el-table-column prop="roleName" label="Role" width="180" />
        <el-table-column prop="description" label="Description" />
        <el-table-column label="Operation" width="224">
          <template #default="scope">
            <el-button
              size="small"
              color="#3A62D7"
              :disabled="!store.state.roleCodes.includes('Account-Detail')"
              @click="handleDetail(scope.row)"
              >Detail</el-button
            >
            <el-button
              size="small"
              color="#3A62D7"
              @click="handleUpdate(scope.row)"
              :disabled="!store.state.roleCodes.includes('Update-Account')"
              >Update</el-button
            >
            <el-button
              size="small"
              color="#BD3124"
              @click="handleDelete(scope.row)"
              :disabled="!store.state.roleCodes.includes('Detele-Account')"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { accountList, accountDelete } from '@/api/account'
import { getRoleList } from '@/api/role'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()

onMounted(() => {
  getTableData()
  getRolesList()
})

let roleOptions = ref([])
let total = ref()

const formAccount = ref({
  loginName: '',
  userName: '',
  userId: '',
  roleKey: ''
})

let tableData = ref([])

let currentPage = ref(1)
let pageSize = ref(10)

const getTableData = async () => {
  const res = await accountList({
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  // console.log(res.data);
  tableData.value = res.data.data.records
  total.value = res.data.data.total
  // console.log(tableData);
}
const getRolesList = async () => {
  const res = await getRoleList({
    pageNo: 1,
    pageSize: 999
  })
  if (res.data.code === '0') {
    roleOptions.value = res.data.data.records
  }
}

const hadleSearch = async () => {
  const res = await accountList({
    pageNo: currentPage.value,
    pageSize: pageSize.value,
    loginName: formAccount.value.loginName,
    userName: formAccount.value.userName,
    roleKey: formAccount.value.roleKey
  })
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}

const handleReset = async () => {
  formAccount.value = {
    loginName: '',
    userName: '',
    userId: '',
    roleKey: ''
  }
  const res = await accountList({
    pageNo: currentPage.value,
    pageSize: pageSize.value,
  })
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}

const handleDelete = async (row) => {
  ElMessageBox.confirm('确认删除吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'el-button--confirm',
    cancelButtonClass: 'el-button--cancel'
  }).then(async () => {
    const res = await accountDelete({ userIds: row.userId })
    if (res.data.code === '0') {
      ElMessage.success('删除成功')
      getTableData()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

const handleDetail = (row) => {
  localStorage.setItem('loginName', row.loginName)
  localStorage.setItem('userName', row.userName)
  localStorage.setItem('accountRoleId', row.roleId)
  localStorage.setItem('description', row.description)
  router.push({
    path: '/setings/accountDetail',
    query: row
  })
}

const handleUpdate = (row) => {
  localStorage.setItem('loginName', row.loginName)
  localStorage.setItem('userName', row.userName)
  localStorage.setItem('accountRoleId', row.roleId)
  localStorage.setItem('description', row.description)
  router.push({
    path: '/setings/updateAccount',
    query: row
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
  console.log(`${val} 条每页`)
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
  console.log(`页码: ${val}`)
}

const addAccount = () => {
  router.push('/setings/createAccount')
}
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
.btn-right {
  float: right;
  margin-top: 10px;
  .el-button {
    height: 28px;
    padding: 0 20px;
  }
}
::v-deep .demo-form-inline {
  font-weight: 700;
}
::v-deep .el-form-item__label {
  color: #101010;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
</style>

<style lang="scss">
.el-button--confirm {
  background: #3a62d7 !important;
  border: none !important;
}
.el-button--cancel,
.el-button--confirm {
  height: 28px !important;
  font-size: 14px !important;
  width: 62px;
}
</style>
